<template>
    <a-form :model="formState" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" autocomplete="off"
        @finish="onFinish">
        <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
            <a-input v-model:value="formState.username" :disabled="!!formState.key" />
        </a-form-item>
        <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入用密码' }]">
            <a-input-password v-model:value="formState.password" />
        </a-form-item>
        <a-form-item label="昵称" name="nickname" :rules="[{ required: true, message: '请输入昵称' }]">
            <a-input v-model:value="formState.nickname" />
        </a-form-item>
        <a-form-item label="权限" name="permission" :rules="[{ required: true, message: '请选择用户权限' }]">
            <a-select ref="select" v-model:value="formState.permission">
                <a-select-option value="admin">管理员</a-select-option>
                <a-select-option value="watcher">观察者</a-select-option>
                <a-select-option value="user">用户</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="是否启用" name="desable" :rules="[{ required: true, message: '请输入昵称' }]">
            <a-radio-group v-model:value="formState.desable">
                <a-radio :value="0" :disabled="!formState.key">启用</a-radio>
                <a-radio :value="1" :disabled="!formState.key">禁用</a-radio>
            </a-radio-group>
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 4, span: 19 }">
            <a-button :loading="loading" type="primary" html-type="submit">提交</a-button>
        </a-form-item>
    </a-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import User from '@/apis/user';
import Admin from '@/apis/admin'
import { notification } from 'ant-design-vue'


const emit = defineEmits(['CloseModel']);
const props = defineProps({
    user: {
        type: Object,
        default: () => { return {} }
    }
});

const loading = ref<boolean>(false);

const formState = reactive<UserFormState>({
    username: '',
    password: '',
    nickname: '',
    desable: 0,
    permission: 'user',
    ...props.user
});

console.log(formState);

const onFinish = (values: any) => {
    if (formState.key) {
        Admin.UserUpdate(formState).then((res: any) => {
            notification.success({ message: res.message });
            emit('CloseModel')
        })
    } else {
        User.Regist(formState).then((res: any) => {
            notification.success({ message: res.message });
            emit('CloseModel')
        })
    }
};

</script>